import { View, Text, StyleSheet, TouchableOpacity, Platform } from "react-native"
import { Settings } from "lucide-react-native"
import { theme } from "../../constants/theme"

interface TodayPlanProps {
    todayPlan: {
        newWords: { count: number; status: string }
        reviewWords: { count: number; status: string }
    }
    onAdjustPlan: () => void
    onLearnPress: () => void
    onReviewPress: () => void
}

export function TodayPlanSection({ todayPlan, onAdjustPlan, onLearnPress, onReviewPress }: TodayPlanProps) {
    return (
        <View style={styles.todayPlanContainer}>
            <View style={styles.headerContainer}>
                <View style={styles.titleContainer}>
                    <Text style={styles.todayPlanTitle}>今日计划</Text>
                    <View style={styles.titleDecoration} />
                </View>
                <TouchableOpacity style={styles.adjustPlanButton} onPress={onAdjustPlan}>
                    <Settings size={14} color="#6B4EFF" style={styles.adjustPlanIcon} />
                    <Text style={styles.adjustPlanText}>调整计划</Text>
                </TouchableOpacity>
            </View>

            <Text style={styles.todayPlanNote}>注：新学与复习均为"已完成"时，计划正常推送</Text>

            <View style={styles.todayPlanCards}>
                {/* 新学卡片 */}
                <View style={styles.todayPlanCard}>
                    <View style={[styles.statusBadge, todayPlan.newWords.status === "已完成" && styles.statusBadgeCompleted]}>
                        <Text style={[styles.statusText, todayPlan.newWords.status === "已完成" && styles.statusTextCompleted]}>
                            {todayPlan.newWords.status}
                        </Text>
                    </View>
                    <Text style={styles.wordCount}>{todayPlan.newWords.count}</Text>
                    <Text style={styles.wordLabel}>需新学(词)</Text>
                </View>

                {/* 复习卡片 */}
                <View style={styles.todayPlanCard}>
                    <View style={[styles.statusBadge, todayPlan.reviewWords.status === "已完成" && styles.statusBadgeCompleted]}>
                        <Text style={[styles.statusText, todayPlan.reviewWords.status === "已完成" && styles.statusTextCompleted]}>
                            {todayPlan.reviewWords.status}
                        </Text>
                    </View>
                    <Text style={styles.wordCount}>{todayPlan.reviewWords.count}</Text>
                    <Text style={styles.wordLabel}>需复习(词)</Text>
                </View>
            </View>

            <View style={styles.actionButtons}>
                <TouchableOpacity
                    style={[styles.learnButton, todayPlan.newWords.count === 0 && styles.disabledButton]}
                    onPress={onLearnPress}
                    disabled={todayPlan.newWords.count === 0}
                >
                    <Text style={styles.learnButtonText}>新学</Text>
                </TouchableOpacity>
                <TouchableOpacity
                    style={[styles.reviewButton, todayPlan.reviewWords.count === 0 && styles.disabledReviewButton]}
                    onPress={onReviewPress}
                    // disabled={todayPlan.reviewWords.count === 0}
                >
                    {/* <Text style={[styles.reviewButtonText, todayPlan.reviewWords.count === 0 && styles.disabledReviewButtonText]}> */}
                    <Text style={styles.reviewButtonText}>
                        复习
                    </Text>
                </TouchableOpacity>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    todayPlanContainer: {
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.large,
        padding: theme.spacing.lg,
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0,0,0,0.1)",
                shadowOffset: { width: 0, height: 4 },
                shadowOpacity: 0.2,
                shadowRadius: 8,
            },
            android: {
                elevation: 4,
            },
        }),
    },
    headerContainer: {
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        marginBottom: theme.spacing.md,
    },
    titleContainer: {
        flexDirection: "row",
        alignItems: "center",
    },
    todayPlanTitle: {
        fontSize: theme.fontSize.lg,
        fontWeight: theme.fontWeight.bold,
        color: theme.colors.neutral.black,
        marginRight: theme.spacing.sm,
    },
    titleDecoration: {
        height: 3,
        width: 40,
        backgroundColor: "#6B4EFF",
        borderRadius: 2,
    },
    adjustPlanButton: {
        backgroundColor: "#F3F0FF",
        paddingHorizontal: theme.spacing.md,
        paddingVertical: theme.spacing.xs,
        borderRadius: theme.borderRadius.medium,
        flexDirection: "row",
        alignItems: "center",
    },
    adjustPlanIcon: {
        marginRight: 4,
    },
    adjustPlanText: {
        color: "#6B4EFF",
        fontSize: theme.fontSize.sm,
        fontWeight: "500",
    },
    todayPlanNote: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.neutral.gray,
        marginBottom: theme.spacing.lg,
        lineHeight: 18,
    },
    todayPlanCards: {
        flexDirection: "row",
        justifyContent: "space-between",
        marginBottom: theme.spacing.lg,
        gap: theme.spacing.md,
    },
    todayPlanCard: {
        flex: 1,
        backgroundColor: "#F8F9FA",
        borderRadius: theme.borderRadius.medium,
        padding: theme.spacing.lg,
        alignItems: "center",
        position: "relative",
        borderWidth: 1,
        borderColor: "#F1F3F5",
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0,0,0,0.05)",
                shadowOffset: { width: 0, height: 2 },
                shadowOpacity: 0.1,
                shadowRadius: 4,
            },
            android: {
                elevation: 2,
            },
        }),
    },
    statusBadge: {
        position: "absolute",
        top: 8,
        right: 8,
        backgroundColor: "#E9ECEF",
        paddingHorizontal: 8,
        paddingVertical: 2,
        borderRadius: 12,
    },
    statusBadgeCompleted: {
        backgroundColor: "#E6F8F3",
    },
    statusText: {
        fontSize: 10,
        color: "#868E96",
        fontWeight: "500",
    },
    statusTextCompleted: {
        color: "#12B76A",
    },
    wordCount: {
        fontSize: 36,
        fontWeight: "bold",
        color: theme.colors.neutral.black,
        marginBottom: 4,
    },
    wordLabel: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.neutral.gray,
    },
    actionButtons: {
        flexDirection: "row",
        justifyContent: "space-between",
        gap: theme.spacing.md,
    },
    learnButton: {
        flex: 1,
        backgroundColor: "#6B4EFF",
        borderRadius: theme.borderRadius.large,
        paddingVertical: theme.spacing.md,
        alignItems: "center",
        ...Platform.select({
            ios: {
                shadowColor: "#6B4EFF",
                shadowOffset: { width: 0, height: 2 },
                shadowOpacity: 0.2,
                shadowRadius: 4,
            },
            android: {
                elevation: 3,
            },
        }),
    },
    disabledButton: {
        backgroundColor: "#D8D8D8",
    },
    reviewButton: {
        flex: 1,
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.large,
        paddingVertical: theme.spacing.md,
        alignItems: "center",
        borderWidth: 1,
        borderColor: "#6B4EFF",
    },
    disabledReviewButton: {
        borderColor: "#D8D8D8",
    },
    learnButtonText: {
        color: theme.colors.neutral.white,
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.medium,
    },
    reviewButtonText: {
        color: "#6B4EFF",
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.medium,
    },
    disabledReviewButtonText: {
        color: "#A0A0A0",
    },
})

